<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        section>div:last-child {
            background-color: blue;
        }

        section {
            display: flex;
            margin-top: 50px;
        }
    </style>
</head>

<body>

    机选号码：
    <section class="computer">

    </section>
    玩家号码：
    <section class="player">

    </section>


    <h1 class="result"></h1>


    <script src="../../JS基础/utils.js"></script>
    <script>

        //获取元素
        let computerEle = document.getElementsByClassName('computer')[0];
        let playerEle = document.getElementsByClassName('player')[0];
        let h1 = document.getElementsByClassName('result')[0];

        //----- 生成球
        function createBall() {
            //蓝球
            let blue = createRandom(1, 16);
            //红球
            let redArr = [];
            let s = new Set();
            while (s.size < 6) {
                let red = createRandom(1, 33);
                s.add(red);
            }
            redArr = [...s];
            return { red: redArr, blue }
        }


        //渲染球的函数
        function renderBall(ballObj, ele) {
            let str = '';
            /**
             * <div>${item}</div>
             * <div>${item}</div>
             * <div>${item}</div>
             * <div>${item}</div>
             * <div>${item}</div>
             * <div>${item}</div>
             * 
            */
            ballObj.red.forEach((item, index, arr) => {
                str += `
                <div>${item}</div>
                `
            });
            str += `<div>${ballObj.blue}</div>`
            ele.innerHTML = str;
        }

        let computer;
        let player;
        setInterval(() => {
            computer = createBall();
            player = createBall();
            console.log(player);
            renderBall(computer, computerEle)
            renderBall(player, playerEle)
            judge(computer, player);
        }, 200)


        //----- 判断
        function judge(computer, player) {
            //{ red: [ 29, 14, 26, 5, 20, 19 ], blue: 2 }
            let blueCount = computer.blue == player.blue ? 1 : 0;
            let redCount = computer.red.filter(function (item) {
                //在电脑红球中取出一个数到玩家红球当中去查找是否存在这个数
                return player.red.indexOf(item) !== -1
            }).length;

            if (redCount == 6 && blueCount == 1) {
                console.log('一等奖');
                h1.innerHTML = '一等奖'
            } else if (redCount == 6 && blueCount == 0) {
                console.log('二等奖');
                h1.innerHTML = '二等奖'
            } else if (redCount == 5 && blueCount == 1) {
                console.log('三等奖');
            } else if ((redCount == 5 && blueCount == 0) || (redCount == 4 && blueCount == 1)) {
                console.log('四等奖');
            } else if ((redCount == 4 && blueCount == 0) || (redCount == 3 && blueCount == 1)) {
                console.log('五等奖');
            } else if ((redCount == 2 && blueCount == 1) || (redCount == 2 && blueCount == 1) || (redCount == 0 && blueCount == 1)) {
                console.log('六等奖');
                h1.innerHTML = '六等奖'
            } else {
                console.log('啥也没有');
                h1.innerHTML = '啥也没有'
            }
        }







    </script>
</body>

</html>